<template>
  <div class="meeting">
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
    >
      <el-form-item label="会议时间">
        <el-date-picker
          v-model="formInline.m_time"
          type="date"
          placeholder="会议时间"
          class="el-col-18"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item
        label="参会人员"
        class="el-col-4"
      >
        <el-input
          v-model="formInline.m_participants"
          placeholder="参会人员"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="记录员"
        class="el-col-4"
      >
        <el-select
          v-model="formInline.m_recorder"
          placeholder="记录员"
        >
          <el-option
            v-for="item in options"
            :key="item.uid"
            :value="item.uname"
            :label="item.uname"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="会议内容"
        class="el-col-4"
      >
        <el-input
          v-model="formInline.m_content"
          placeholder="会议内容"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="onSubmit"
        >添加</el-button>
      </el-form-item>
    </el-form>
    <div class="table">
      <el-table
        v-loading="loading"
        ref="singleTable"
        :data="db.data"
        highlight-current-row
        border
        style="width: 100%"
      >
        <el-table-column
          type="index"
          width="50"
        >
        </el-table-column>
        <template
          v-for="(item,index) in db.hd"
          :key="index"
        >
          <el-table-column
            :property="item.field"
            :label="item.label"
            width="220"
          >
          </el-table-column>
        </template>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import addTableDate from "../utils/addTableData";
import handleDelete from "../utils/handleDele";

export default {
  data() {
    return {
      loading:true,
      options: [],
      formInline: {
        m_time: "",
        m_participants: "",
        m_recorder: "",
        m_content: "",
      },
      db: {
        hd: [
          { field: "m_time", label: "会议时间" },
          { field: "m_participants", label: "参会人员" },
          { field: "m_recorder", label: "记录员" },
          { field: "m_content", label: "会议内容" },
        ],
        data: [],
      },
    };
  },
  methods: {
    onSubmit() {
      addTableDate.call(
        this,
        this.formInline,
        "meetingAddServlet",
        this.getTableData.bind(this)
      );
    },
    handleEdit(index, row) {
      this.$confirm(
        `
        <label class="el-form-item__label">会议时间:</label>
        <input class="el-input__inner" id="m_time" value="${row.m_time}" placeholder="会议时间"/>
        <label class="el-form-item__label">参会人员:</label>
        <input class="el-input__inner" id="m_participants" value="${row.m_participants}" placeholder="参会人员"/>
        <label class="el-form-item__label">记录员:</label>
        <input class="el-input__inner" id="m_recorder" value="${row.m_recorder}" placeholder="记录员"/>
        <label class="el-form-item__label">会议内容:</label>
        <input class="el-input__inner" id="m_content" value="${row.m_content}" placeholder="会议内容"/>
      `,
        "修改文件",
        {
          dangerouslyUseHTMLString: true,
          confirmButtonText: "确定",
          cancelButtonText: "放弃修改",
        }
      )
        .then(() => {
          let m_time = document.querySelector("#m_time").value;
          let m_participants = document.querySelector("#m_participants").value;
          let m_recorder = document.querySelector("#m_recorder").value;
          let m_content = document.querySelector("#m_content").value;
          fetch("/api/meetingUpdateServlet", {
            method: "post",
            body: `id=${row.id}&m_time=${m_time}&m_participants=${m_participants}&m_recorder=${m_recorder}&m_content=${m_content}`,
            headers: {
              "Content-Type": "application/x-www-form-urlencoded",
            },
          })
            .then((res) => res.json())
            .then((res) => {
              if (res.status == "0") {
                this.$message({
                  type: "success",
                  message: "修改成功!",
                });
                this.getTableData.call(this);
              } else {
                this.$message.error("服务器繁忙，请稍后再试！");
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已放弃修改",
          });
        });
    },
    handleDelete(index, row) {
      handleDelete.call(
        this,
        "meetingDeleteServlet",
        "id",
        row,
        this.getTableData.bind(this)
      );
    },
  },
  mounted() {
    fetch("/api//checkingSelectServlet", {
      method: "post",
    })
      .then((res) => res.json())
      .then((res) => {
        this.options = res.data;
      });

    // 获取会议记录表数据
    function getTableData() {
      this.loading = true
      fetch("/api/meetingSelectServlet")
        .then((res) => res.json())
        .then((res) => {
          if (res.status == "0") {
            this.db.data = res.data;
            this.loading = false
          }
        });
    }
    getTableData.call(this);
    this.getTableData = getTableData;
  },
};
</script>

<style>
</style>